<template>
  <div>
    <div v-if="showPay">
      <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
        <md-popup-title-bar title="支付车费" ok-text cancel-text="取消" @confirm="confirm" @cancel="cancel"></md-popup-title-bar>
        <div class="taxiPayType">
          <p class="city_pay">
            合计费用
            <span>{{orderAmt}}元</span>
          </p>
          <p class="city_coupom" @click="cityCoupomBtn">
            优惠券
            <span>
              {{coupomName}}
              <md-icon name="wdqb-more" slot="left" class="quxiao_icon"></md-icon>
            </span>
          </p>
          <p class="taxiPayAlt">
            ￥
            <span>{{lastOrderAmt}}</span>
          </p>
          <p class="taxiPayDetail" @click="chargesDetails">
            费用疑问
            <md-icon name="wdqb-more" slot="left" class="quxiao_icon"></md-icon>
          </p>
          <p class="close_time">
            距离支付时间还剩
            <span>{{payCloseDate}}</span>
          </p>
          <div class="payType">
            <ul class="choice-payment-method">
              <li @click="paybalance">
                <img src="@/assets/imgs/snyc_zf_yezf.png" />
                <span>余额支付</span>
                <b>
                  <em>{{userAccount}}余额</em>
                  <i class="choice-payment-right" :class="{active:paymentMethod == 'balance'}"></i>
                </b>
              </li>
              <li @click="payWx">
                <img src="@/assets/imgs/cz_wx_icon@2x.png" />
                <span>微信支付</span>
                <b>
                  <i class="choice-payment-right" :class="{active:paymentMethod == 'wechat'||paymentMethod == 'miniprogram'||paymentMethod=='h5wx'}"></i>
                </b>
              </li>
              <li @click="payAli" v-if="hasAlipay">
                <img src="@/assets/imgs/cz_zfb_icon@2x.png" />
                <span>支付宝支付</span>
                <b>
                  <i class="choice-payment-right" :class="{active:paymentMethod == 'alipay'}"></i>
                </b>
              </li>
            </ul>
          </div>
          <p class="taxi_pay" @click="cityPayBtn">确认支付</p>
        </div>
      </md-popup>
    </div>
    <div v-else>
      <md-popup id="popup-container" v-model="paypwdvalue" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
        <md-popup-title-bar title="请输入支付密码" ok-text cancel-text="取消" @cancel="paypwdcancel"></md-popup-title-bar>
        <div class="pay_box">
          <md-codebox :mask="true" autofocus :maxlength="6" v-model="payPwd" @submit="paysubmit" />
        </div>
      </md-popup>
    </div>
  </div>
</template>
<script>
/**
 * 此组件根据服务器返回的支付方式
 */
import '@/assets/svgs/wdqb-more.svg';
import { Popup, PopupTitleBar, Picker, Icon, Codebox, Toast, Dialog } from 'mand-mobile';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import Loading from '@/components/loading';
import http from '@/common/http';
import Pop from '@/views/incity/popup';
import { Base64 } from 'js-base64';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'pay-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Codebox.name]: Codebox,
    [Picker.name]: Picker
  },
  data() {
    return {
      paymentMethod: 'balance',
      showPay: true,
      paypwdvalue: false,
      payPwd: '',
      payType: '1004', // 支付方式
      coupomName: '',
      orderAmt: '',
      lastOrderAmt: '',
      userAccount: '',
      payCloseDate: '',
      incityPayTimer: null
    };
  },
  created() {
    if (this.getIncityOrderDate.couponType === '1') {
      // 使用优惠券
      this.coupomName = this.getIncityOrderDate.couponInfo.couponTitle;
    } else if (this.getIncityOrderDate.couponType === '2') {
      // 有优惠券 不使用
      this.coupomName = '有可用优惠券';
    } else if (this.getIncityOrderDate.couponType === '3') {
      // 没有优惠券
      this.coupomName = '无可用';
    }
    if (this.getIncityOrderDate.orderAmt) {
      this.orderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.orderAmt));
    }
    if (this.getIncityOrderDate.lastOrderAmt) {
      this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
    }
    if (this.getIncityOrderDate.userAccount) {
      this.userAccount = this.getIncityOrderDate.userAccount;
    }
    this.incityPayTimer = setInterval(() => {
      let time = (parseInt(this.getIncityOrderDate.payCloseDate) - new Date().getTime()) / 1000;
      if (time > 0) {
        let minutes = Math.floor(time / 60) > 9 ? Math.floor(time / 60) : '0' + Math.floor(time / 60);
        let seconds = Math.floor(time % 60) > 9 ? Math.floor(time % 60) : '0' + Math.floor(time % 60);
        this.payCloseDate = minutes + ':' + seconds;
      } else {
        clearInterval(this.incityPayTimer);
        this.value = false;
        this.payCloseDate = '00:00';
      }
    }, 1000);
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  beforeDestroy() {
    clearInterval(this.incityPayTimer);
    this.incityPayTimer = null;
  },
  methods: {
    ...mapActions(['incitySubmitPayment']),
    confirm() {
      this.value = false;
      this.$emit('submit');
    },
    cancel() {
      this.value = false;
      clearInterval(this.incityPayTimer);
      this.incityPayTimer = null;
    },
    paypwdcancel() {
      this.paypwdvalue = false;
      this.showPay = true;
      this.value = true;
    },
    paybalance() {
      // 选择余额支付
      this.paymentMethod = 'balance';
      this.payType = '1004';
    },
    payWx() {
      // 选择微信支付
      switch (Utils.getCurrentEnv()) {
        case 'mini':
          this.paymentMethod = 'miniprogram';
          break;
        case 'wx':
          this.paymentMethod = 'wechat';
          break;
        case 'h5':
          this.paymentMethod = 'h5wx';
          break;
      }
      this.payType = '1001';
    },
    payAli() {
      // 选择支付宝支付
      this.paymentMethod = 'alipay';
      this.payType = '1002';
    },
    cityPayBtn() {
      if (this.paymentMethod === 'balance') {
        // 余额支付
        this.showPay = false;
        this.paypwdvalue = true;
        this.value = false;
      } else if (this.paymentMethod === 'wechat') {
        // 微信支付
      } else if (this.paymentMethod === 'miniprogram') {
        // 小程序支付
      } else if (this.paymentMethod === 'h5wx') {
        // H5支付
      } else if (this.paymentMethod === 'alipay') {
        // 支付宝支付
      }
    },
    paysubmit() {
      if (this.payPwd.length === 6) {
        this.createBalancePay();
      }
    },
    createBalancePay() {
      let params = {
        payPwd: CryptoJS.MD5(this.payPwd).toString()
      };
      Loading.show();
      http.post('pakj/passenger/validatePayPwd', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.showPay = true;
          this.paypwdvalue = false;
          this.value = false;
          let param = {
            payType: this.payType,
            orderNo: this.getIncityOrderDate.orderNo,
            userCouponId: this.getIncityOrderDate.couponId
          };
          this.incitySubmitPayment(param).then(() => {
            this.$router.replace({
              name: 'incityDetail',
              query: {
                orderno: this.getIncityOrderDate.orderNo
              }
            });
            // Dialog.alert({
            //     title: "提示",
            //     content: "支付成功",
            //     confirmText: "确定",
            //     onConfirm: () => {
            //         this.$router.replace({
            //             name: "incityDetail",
            //             query: {
            //                 orderno: this.getIncityOrderDate.orderNo
            //             }
            //         })
            //     }
            // });
          });
        } else {
          this.payPwd = '';
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 处理金额
    orderAmtFormat(number) {
      if (number.indexOf('.') === -1) {
        return number + '.00';
      } else {
        return number;
      }
    },
    // 费用疑问
    chargesDetails() {
      Pop.createIncityChargesDetailsSelector().then(data => {});
    },
    // 使用优惠券
    cityCoupomBtn() {
      if (this.getIncityOrderDate.couponType === '1') {
        // 使用优惠券
        Pop.createIncityCouponSelector().then(data => {
          if (this.getIncityOrderDate.couponType === '2') {
            this.coupomName = '有可用优惠券';
            this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
          } else {
            this.coupomName = this.getIncityOrderDate.couponInfo.couponTitle;
            this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
          }
        });
      } else if (this.getIncityOrderDate.couponType === '2') {
        // 有优惠券 不使用
        Pop.createIncityCouponSelector().then(data => {
          if (this.getIncityOrderDate.couponType === '2') {
            this.coupomName = '有可用优惠券';
            this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
          } else {
            this.coupomName = this.getIncityOrderDate.couponInfo.couponTitle;
            this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
          }
        });
      } else if (this.getIncityOrderDate.couponType === '3') {
        // 没有优惠券
        Dialog.alert({
          title: '提示',
          content: '没有可用优惠券',
          confirmText: '确定'
        });
      }
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {
    ...mapGetters(['getIncityOrderDate']),
    hasAlipay() {
      if (Utils.getCurrentEnv() === 'h5') {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="stylus">
#popup-container {
  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .taxiPayType {
    background-color: #fff;
  }

  .pay_box {
    background-color: #fff;
    height: 550px;
    padding-top: 20px;
  }

  .taxiPayAlt {
    text-align: center;
    padding-top: 30px;
    font-size: 24px;
    color: #333;
  }

  .taxiPayAlt span {
    font-size: 40px;
  }

  .city_pay {
    height: 68px;
    line-height: 68px;
    font-size: 26px;
    color: #333;
    padding: 0px 30px;
  }

  .city_pay span {
    float: right;
    font-size: 26px;
    color: #666;
  }

  .city_coupom {
    height: 68px;
    line-height: 68px;
    font-size: 26px;
    color: #333;
    padding: 0px 30px;
  }

  .city_coupom span {
    float: right;
    font-size: 26px;
    color: #666;
  }

  .taxiPayDetail {
    text-align: center;
    font-size: 24px;
    color: #999;
    margin-top: 20px;
  }

  .choice-payment-method li {
    padding: 0px 30px;
    font-size: 26px;
    color: #666;
    line-height: 88px;
    height: 88px;
    border-bottom: #e0e0e0 solid 1px;
  }

  .choice-payment-method li img {
    width: 44px;
    height: 44px;
    position: relative;
    top: 12px;
  }

  .choice-payment-method li span {
    margin-left: 20px;
  }

  .choice-payment-method li b {
    float: right;
    color: #999999;
    font-weight: 400;
  }

  .choice-payment-method li b em {
    margin-right: 10px;
    font-style: normal;
  }

  .choice-payment-right {
    display: inline-block;
    background-color: #fff;
    width: 36px;
    height: 36px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    position: relative;
    top: 12px;
  }

  .choice-payment-method li b .active {
    background: url('../../../assets/imgs/ddzf_icon_pre@2x.png') no-repeat center center;
    background-size: contain;
    border-color: #fff;
    width: 36px;
    height: 36px;
  }

  .taxi_pay {
    background-color: #ff6917;
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    color: #fff;
    text-align: center;
  }

  .close_time {
    margin-top: 10px;
    text-align: center;
    font-size: 24px;
    color: #999;
  }

  .close_time span {
    color: #FF6917;
    margin-left: 5px;
  }

  .taxi_cost_text {
    color: #666;
    text-align: center;
    padding-top: 20px;
    font-size: 22px;
    padding-bottom: 20px;
  }

  .quxiao_icon {
    width: 24px;
    height: 24px;
    position: relative;
    top: 3px;
  }

  .slider {
    width: 200vw;
    transform: translate3d(0, 0, 0);
    transition: transform 0.5s ease-in-out;

    .container {
      background-color: #fff;
      height: 432px;
      width: 100vw;
      float: left;
      font-size: 22px;

      .hint {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 88px;
        font-size: 22px;
        color: color-text-caption;

        .hint-icon {
          width: 26px;
          height: 24px;
        }

        .theme-str {
          color: theme-color;
        }
      }

      .flex-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88px;

        .waiting-hint {
          display: -webkit-box;
          font-size: 22px;

          .hint-icon {
            width: 26px;
            height: 24px;
          }

          .hint-str {
            color: theme-color;
          }

          .waiting-hint {
            color: color-text-caption;
            max-width: 25em;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
